<template>
	<view>
		<view class="nav">
			<navigator class="back" open-type="navigateBack"><u-icon class="back" name="arrow-left" color="#000" size="22"></u-icon></navigator>
			<u-tabs
				class="tab"
			    :list="tabList"
			    lineWidth="30"
				:current="current"
			    lineColor="#000000"
			    :activeStyle="{
			        color: '#000000',
			        fontWeight: 'bold',
			        transform: 'scale(1.05)'
			    }"
			    :inactiveStyle="{
			        color: '#000000',
			        transform: 'scale(1)'
			    }"
				itemStyle="padding-left: 30rpx; padding-right: 30rpx; height: 44px;"
				@change="onchangeTab"
			>
			</u-tabs>
		</view>
		
		<uni-list :border="false">
			<view class="list-tip">
				<u-search v-model="searchKeyword"  placeholder="可搜索用户备注以及名字" style="margin:20rpx;" :showAction="false" shape="square" ></u-search>
			</view>
			<view class="sub-title">
				<view class="left" v-if="current==0">
					我的关注（{{personList.length}}）人
				</view>
				<view class="left" v-else>
					我的粉丝（{{personList.length}}）人
				</view>
				<view class="right">
					<u-icon class="slot-icon" name="list-dot" color="#323232" size="16"></u-icon>
					综合排序
				</view>
			</view>
			<view class="tag-box" >
			    <u-tag 
					class="tag"
					v-for="(item, index) in radios" :key="index"
					:text="item.text"
					:plain="!item.checked"
					bgColor="#EEEEEE"
					borderColor="#EEEEEE"
					:name="index"
					size="mini"
					@click="radioClick"
			    >
			    </u-tag>
			</view>
			<u-empty mode="search" v-if="filteredPersonList.length === 0 && personList.length > 0" text="未找到相关用户"></u-empty>
			<u-empty mode="data" v-if="personList.length==0" text="暂无数据"></u-empty>
			<!-- 关注-->
			<uni-list-item v-if="current==0&&filteredPersonList.length!=0"  :border="false" clickable @click="goToOthersPage(item,index)" v-for="(item, index) in filteredPersonList ">
				<template v-slot:header>
					<u-avatar mode="aspectFill" size="50" :src="item.avatar"></u-avatar>
				</template>
				<template v-slot:body>
					<view class="slot-box">
						<view class="slot-box-name">
							<view>{{item.nickName}}</view>
						</view>
						<view class="slot-button">
							<!-- <u-button class="zx" v-if="item.isOnLine" color="#25CD41" size="mini" text="在线"></u-button> -->
							<u-tag class="zx" v-if="item.isOnLine" text="在线" bgColor="#25CD41" borderColor="#25CD41" color="#FFFFFF" size="mini"></u-tag>
							<u-tag class="zb" v-if="item.isLive" icon="/static/login/tag/icon_cnz.png" text="正在直播" bgColor="#EEEEEE" borderColor="#EEEEEE" color="#000000" size="mini"></u-tag>
							<u-tag class="new" v-if="item.new" :text="item.new+'条动态未看'" bgColor="#EEEEEE" borderColor="#EEEEEE" color="#969696" size="mini"></u-tag>
							<text  v-if="!item.isOnLine&&!item.new&&!item.isLive">{{item.notes}}</text>
						</view>
					</view>
				</template>
				<template v-slot:footer>
					<view class="slot-image" v-if="!item.isFriend">
						<u-button size="small" icon="checkmark" shape="circle" text="已关注"></u-button>
						<u-icon class="slot-icon" name="more-dot-fill" color="#000000" size="16"></u-icon>
					</view>
					<view class="slot-image" v-else>
						<u-button size="small" shape="circle" text="互相关注"></u-button>
						<u-icon class="slot-icon" name="more-dot-fill" color="#000000" size="16"></u-icon>
					</view>
				</template>
			</uni-list-item>
			
			<!-- 粉丝 -->
			<uni-list-item v-if="current==1&&filteredPersonList.length!=0"  :border="false" clickable @click="goToOthersPage(item,index)" v-for="(item,index) in filteredPersonList">
				<template v-slot:header>
					<u-avatar mode="aspectFill" size="50" :src="item.avatar"></u-avatar>
				</template>
				<template v-slot:body>
					<view class="slot-box">
						<view class="slot-box-name">
							<view>{{item.nickName}}</view>
						</view>
						<view class="slot-button">
							<u-tag class="zx" v-if="item.isOnLine" text="在线" bgColor="#25CD41" borderColor="#25CD41" color="#FFFFFF" size="mini"></u-tag>
							<u-tag class="zb" v-if="item.isLive" icon="/static/login/tag/icon_cnz.png" text="正在直播" bgColor="#EEEEEE" borderColor="#EEEEEE" color="#000000" size="mini"></u-tag>
							<u-tag class="new" v-if="item.new" :text="item.new+'条动态未看'" bgColor="#EEEEEE" borderColor="#EEEEEE" color="#969696" size="mini"></u-tag>
							<text  v-if="!item.isOnLine&&!item.new&&!item.isLive">{{item.notes}}</text>
						</view>
					</view>
				</template>
				<template v-slot:footer>
					<view class="slot-image" v-if="item.isFriend>0">
						<u-button size="small" shape="circle" text="互相关注"></u-button>
						<u-icon class="slot-icon" name="more-dot-fill" color="#000000" size="16"></u-icon>
					</view>
					<view class="slot-image" v-else>
						<u-button text="回关TA" shape="circle" @click.native.stop="onFollow(item,index)" plain size="small" color="#F82F41"></u-button>
						<u-icon class="slot-icon" name="more-dot-fill" color="#000000" size="16"></u-icon>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<u-divider v-if="personList.length!=0" style="margin: 50rpx;" :textSize="12" text="拉到底了哦~"></u-divider>
	</view>
</template>

<script>
	import { getUser,getPosts,getClientFollow,getClientFollowList } from '@/request/api.js'
	export default {
		data() {
			return {
				tabList: [{ name: '关注' },{ name: '粉丝' }],
				current:1,
				radios: [
					{
						checked: true,
						text:"全部"
					},
					{
						checked: false,
						text:"直播"
				}],
				personList:[],
				searchKeyword: '', // 用于绑定搜索框的关键词
			}
		},
		computed: {
			filteredPersonList() {
				// 如果搜索关键词为空，则直接返回原始列表
				if (!this.searchKeyword.trim()) {
					return this.personList;
				}
				// 将搜索关键词转为小写，以进行不区分大小写的匹配
				const keyword = this.searchKeyword.trim().toLowerCase();
				// 过滤 personList，只返回昵称包含关键词的用户
				return this.personList.filter(user => 
					user.nickName.toLowerCase().includes(keyword)
				);
			}
		},
		onLoad(options) {
			this.current = options.current
			this.getClientFollowList()
		},
		methods: {
			onchangeTab(e){
				console.log(e);
				this.current = e.index
				this.getClientFollowList()
			},
			radioClick(name) {
			    this.radios.map((item, index) => {
			        item.checked = index === name ? true : false;
			    });
			},
			getClientFollowList(){
				getClientFollowList(Number(this.current)+1).then(res=>{
					this.personList = res.data.data
					this.pageNum++
				})
			},
			// 回关
			onFollow(item,index){
				getClientFollow({userId:item.userId}).then(res=>{
					this.personList[index].isFriend = true
				})
			},
			// 添加好友
			onAddFriend(item,index){
				
				console.log("添加好友");
			},
			onChat(item){
				uni.navigateTo({
					url: '/pages_sub/user/chat/chat?userId='+item.id,
				});
			},
			goToOthersPage(userItem, indexInYourList) { // userItem 是你当前列表中的一项
			        let initialData = {
			            userId: userItem.userId,
			            isFollowed: userItem.isFollowed > 0 ? true : false // 或者你的关注状态字段
			        };
			        uni.navigateTo({
			            url: '/pages_sub/user/others/others',
			            events: {
			                returnData: (returnedData) => {
								this.getClientFollowList()
			                }
			            },
			            success: (res) => {
			                res.eventChannel.emit('sendInitData', { data: JSON.stringify(initialData) });
			            }
			        });
			}
		}
	}
</script>

<style lang="scss">
	
	
	::v-deep .u-tag__text--primary{
		color: #000000;
	}
	::v-deep .u-tag__text--primary--plain{
		color: #A1A1A1!important;
	}
	.tag-box {
	    display: flex;
		width: 100%;
		margin: 30rpx;
	}
	.tag{
		margin-right: 20rpx;
	}
	.nav{
		display: flex;
		align-items: center;
	}
	.back{
		// flex: 1;
	}
	.tab{
		width: calc(100% - 44rpx);
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.sub-title{
		display: flex;
		padding: 10rpx 30rpx;
		font-size: 28rpx;
		justify-content: space-between;
		color: #999999;
		.right{
			display: flex;
			align-items: center;
			color: #000;
			font-size: 26rpx;
		}
	}
	.list-tip{
		text-align: center;
		font-size: 24rpx;
	}
	.slot-box {
		display: flex;
		flex-direction: column;
		align-items: self-start;
		justify-content: center;
		padding: 0 30rpx;
		flex: 1;
		.slot-box-name{
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;
		}
	}
	
	.slot-image {
		font-size: 24rpx;
		line-height: 40rpx;
		color: #999999;
		text-align: center;
	}
	
	.slot-button {
		flex: 1;
		font-size: 24rpx;
		line-height: 40rpx;
		color: #999999;
		.zx{
			width: 70rpx;
		}
		.zb{
			width: 150rpx;
		}
		.new{
			width: 150rpx;
		}
	}
	.slot-image {
		font-size: 24rpx;
		line-height: 40rpx;
		color: #999999;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.slot-icon {
		margin-left: 20rpx;
	}
</style>
